<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>复用已有的输入框</title>
<!--引入Vue库-->
<script src="vue.js"></script>
</head>
<body>	
<div id="app">
  <template v-if="loginType === 'username'">
    <label>用户名</label>
    <input placeholder="输入用户名">
  </template>
  <template v-else>
    <label>Email</label>
    <input placeholder="输入邮箱地址">
  </template>
  <div>
    <button @click="toggle">切换登录方式</button>
  </div>
</div>
<script>
var app = new Vue({
    el: '#app',
    data:{
      loginType:'username'
    },
    methods:{
      toggle(){
        if(this.loginType === 'username'){
          this.loginType = 'Email';
        }else{
          this.loginType = 'username';
        }
      }
    }
})
</script>
</body>
</html>
